<template>
	<base-loading-box class="min-h-[200px]" :isEmpty="isEmpty" :loading="loading" :error="error">
		<up-feed-item v-if="data" :data="data" hideFooter></up-feed-item>
	</base-loading-box>
</template>

<script lang="ts" setup>
import { computed, watch } from 'vue'
import { BaseLoadingBox } from '@/components/base'
import { UpFeedItem } from '@/components/up'
import { FeedType } from '@/types'
import { useAppStore, useFeedStore } from '@/store'
import { useRequest } from '@/hooks'
import { getFeedsDetail } from '@/api/feed'

const appStore = useAppStore()
const feedStore = useFeedStore()

const { run, data, loading, error, isEmpty } = useRequest<FeedType>(getFeedsDetail)

const params = computed(() => ({
	tweetId: feedStore.commentFeed?.id,
	currency: appStore.currency,
	oddsStyle: appStore.odds,
	locale: appStore.lang
}))

const search = () => {
	run(params.value)
}

watch(
	() => params.value,
	() => {
		if (feedStore.commentFeed) {
			search()
		}
	},
	{ immediate: true }
)
</script>
